<!DOCTYPE html>
<html lang="zh-Hans">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes">
<meta name="theme-color" content="#317EFB" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=0" name="viewport">
<meta name="description" content="介绍[vue-element-admin]link 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。 功能- 登录 &#x2F; 注销- 权限验证   - 页面权限">
<meta property="og:type" content="article">
<meta property="og:title" content="前端框架搭建">
<meta property="og:url" content="https://big-ttong/myblog.git/2023/07/28/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B60%E5%9F%BA%E7%A1%80%E6%90%AD%E5%BB%BA/index.html">
<meta property="og:site_name" content="欢迎访问我的blog">
<meta property="og:description" content="介绍[vue-element-admin]link 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。 功能- 登录 &#x2F; 注销- 权限验证   - 页面权限">
<meta property="og:locale">
<meta property="article:published_time" content="2023-07-27T23:34:21.718Z">
<meta property="article:modified_time" content="2023-08-01T00:18:55.698Z">
<meta property="article:author" content="洪汉桐">
<meta name="twitter:card" content="summary">


<title >前端框架搭建</title>

<!-- Favicon -->

    <link href='/myblog/log.svg?v=2.0.9' rel='icon' type='image/png' sizes='16x16' ></link>


    <link href='/myblog/log.svg?v=2.0.9' rel='icon' type='image/png' sizes='32x32' ></link>


    <link href='/myblog/log.svg?v=2.0.9' rel='apple-touch-icon' sizes='180x180' ></link>


    <link href='/myblog/site.webmanifest' rel='manifest' ></link>


<!-- Plugin -->




    
<link rel="stylesheet" href="/myblog/css/plugins/bootstrap.row.css">

    
<link rel="stylesheet" href="https://unpkg.com/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.css">

    
<link rel="stylesheet" href="https://unpkg.com/@fancyapps/ui@4.0/dist/fancybox.css">

    
    




<!-- Icon -->

    
<link rel="stylesheet" href="/myblog/css/plugins/font-awesome.min.css">




<!-- Variable -->
<script>window.ASYNC_CONFIG = {"hostname":"big-ttong","author":"洪汉桐","root":"/myblog/","typed_text":["extraordinary"],"theme_version":"2.0.9","theme":{"switch":true,"default":"style-light"},"favicon":{"logo":"log.svg","icon16":"log.svg","icon32":"log.svg","appleTouchIcon":"log.svg","webmanifest":"/site.webmanifest","visibilitychange":true,"hidden":"failure.ico","showText":"(/≧▽≦/)咦！又好了！","hideText":"(●—●)喔哟，崩溃啦！"},"i18n":{"placeholder":"搜索文章...","empty":"找不到您查询的内容: ${query}","hits":"找到 ${hits} 条结果","hits_time":"找到 ${hits} 条结果（用时 ${time} 毫秒）","author":"本文作者：","copyright_link":"本文链接：","copyright_license_title":"版权声明：","copyright_license_content":"本博客所有文章除特别声明外，均默认采用 undefined 许可协议。","copy_success":"复制成功","copy_failure":"复制失败","open_read_mode":"进入阅读模式","exit_read_mode":"退出阅读模式","notice_outdate_message":"距离上次更新已经 undefined 天了, 文章内容可能已经过时。","just":"刚刚","min":"分钟前","hour":"小时前","day":"天前","month":"个月前"},"swup":false,"plugin":{"flickr_justified_gallery":"https://unpkg.com/flickr-justified-gallery@latest/dist/fjGallery.min.js"},"icons":{"sun":"far fa-sun","moon":"far fa-moon","play":"fas fa-play","email":"far fa-envelope","next":"fas fa-arrow-right","calendar":"far fa-calendar-alt","clock":"far fa-clock","user":"far fa-user","back_top":"fas fa-arrow-up","close":"fas fa-times","search":"fas fa-search","reward":"fas fa-hand-holding-usd","user_tag":"fas fa-user-alt","toc_tag":"fas fa-th-list","read":"fas fa-book-reader","arrows":"fas fa-arrows-alt-h","double_arrows":"fas fa-angle-double-down","copy":"fas fa-copy"},"icontype":"font","highlight":{"plugin":"highlighjs","theme":true,"copy":true,"lang":true,"title":"default","height_limit":200},"notice_outdate":{"enable":true,"style":"flat","limit_day":365,"position":"top"}};</script>
<script id="async-page-config">window.PAGE_CONFIG = {"isPost":true,"isHome":false,"postUpdate":"2023-08-01 08:18:55"};</script>

<!-- Theme mode css -->
<link data-swup-theme rel="stylesheet" href="/myblog/css/index.css?v=2.0.9" id="trm-switch-style">
<script>
    let defaultMode = ASYNC_CONFIG.theme.default !=='auto' ?  ASYNC_CONFIG.theme.default : (window.matchMedia("(prefers-color-scheme: light)").matches ? 'style-light' : 'style-dark')
    let catchMode = localStorage.getItem('theme-mode') || defaultMode;
    let type = catchMode === 'style-dark' ? 'add' : 'remove';
    document.documentElement.classList[type]('dark')
</script>

<!-- CDN -->


    
    



<!-- Site Analytics -->
 
<meta name="generator" content="Hexo 6.3.0"></head>

<body>

  <!-- app wrapper -->
  <div class="trm-app-frame">

    <!-- page preloader -->
    <div class="trm-preloader">
    <div class="trm-holder">
        <div class="preloader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
    <!-- page preloader end -->

    <!-- change mode preloader -->
    <div class="trm-mode-swich-animation-frame">
    <div class="trm-mode-swich-animation">
        <i class="i-sun"><i class="iconfont far fa-sun"></i></i>
        <div class="trm-horizon"></div>
        <i class="i-moon"><i class="iconfont far fa-moon"></i></i>
    </div>
</div>
    <!-- change mode preloader end -->

      <!-- scroll container -->
      <div id="trm-dynamic-content" class="trm-swup-animation">
        <div id="trm-scroll-container" class="trm-scroll-container" data-scroll-container style="opacity: 0">
          <div data-scroll-section id="content" class="trm-scroll-section">

            <div class="locomotive-scroll__sticky-target" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;"></div>

            <!-- top bar -->
            <header class="trm-top-bar" data-scroll data-scroll-sticky data-scroll-target=".locomotive-scroll__sticky-target" data-scroll-offset="-10">
	<div class="container">
		<div class="trm-left-side">
			<!-- logo -->
<a href="/myblog/" class="trm-logo-frame trm-anima-link">
    
        <img alt="logo" src="/myblog/log.svg">
    
    
        <div class="trm-logo-text">
            洪<span>汉桐</span>
        </div>
    
</a>
<!-- logo end -->
		</div>
		<div class="trm-right-side">
			<!-- menu -->
<div class="trm-menu">
    <nav>
        <ul>
            
            <li class="menu-item-has-children ">
                <a  href="/myblog/" target="">
                    首页
                </a>
                
            </li>
            
            <li class="menu-item-has-children ">
                <a  href="/myblog/archives/" target="">
                    归档
                </a>
                
            </li>
            
        </ul>
    </nav>
</div>
<!-- menu end -->
			
    <!-- mode switcher place -->
    <div class="trm-mode-switcher-place">
        <div class="trm-mode-switcher">
            <i class="iconfont far fa-sun"></i>
            <input class="tgl tgl-light" id="trm-swich" type="checkbox">
            <label class="trm-swich" for="trm-swich"></label>
            <i class="iconfont far fa-moon"></i>
        </div>
    </div>
    <!-- mode switcher place end -->

			
		</div>
		<div class="trm-menu-btn">
			<span></span>
		</div>
	</div>
</header>
            <!-- top bar end -->

            <!-- body -->
            
<div class="trm-content-start">
    <!-- banner -->
    <div class="trm-banner" data-scroll data-scroll-direction="vertical">
    
    <!-- banner cover -->
    <img style="object-position:top;object-fit:cover;" alt="banner" class="trm-banner-cover" data-scroll data-scroll-direction="vertical" data-scroll-speed="-3" src="/myblog/img/banner.png">
    <!-- banner cover end -->
    

    <!-- banner content -->
    <div class="trm-banner-content trm-overlay">
        <div class="container" data-scroll data-scroll-direction="vertical" data-scroll-speed="0">
            <div class="row">
                
                <div class="col-lg-4"></div>
                
                <div class="col-lg-8">

                    <!-- banner title -->
                    <div class="trm-banner-text ">
                        <div class="trm-label trm-mb-20">
                            NEWS LETTER
                        </div>
                        <h1 class="trm-mb-30 trm-hsmb-font">
                            前端框架搭建
                        </h1>

                        
                            <ul class="trm-breadcrumbs trm-label">
                                <li>
                                    <a href="/myblog/" class="trm-anima-link">Home</a>
                                </li>
                                <li>
                                    <span>
                                        2023
                                    </span
                                ></li>
                            </ul>
                        
                    </div>
                    <!-- banner title end -->

                    <!-- scroll hint -->
                    <a href="#about-triger" data-scroll-to="#about-triger" data-scroll-offset="-130" class="trm-scroll-hint-frame">
                        <div class="trm-scroll-hint"></div>
                        <span class="trm-label">Scroll down</span>
                    </a>
                    <!-- scroll hint end -->

                </div>
            </div>
        </div>
    </div>
    <!-- banner content end -->
</div>
    <!-- banner end -->
    <div class="container">
        <div class="row">
            
                <div id="page-sidebar" class="col-lg-4 hidden-sm">
                    <!-- main card -->
                    

<div class="trm-main-card-frame trm-sidebar">
    <div class="trm-main-card" data-scroll data-scroll-repeat data-scroll-sticky data-scroll-target=".locomotive-scroll__sticky-target" data-scroll-offset="60"> 
    
        <div class="trm-user-tabs" id="sidebar-tabs">
           <div class="trm-tabs-nav trm-mb-40" id="trm-tabs-nav">
                <div data-to="tabs-user" class="trm-tabs-nav-item">
                    <i class="iconfont fas fa-user-alt"></i>
                </div>
                <div data-to="tabs-toc" class="trm-tabs-nav-item active">
                    <i class="iconfont fas fa-th-list"></i>
                </div>
           </div>
            <div name="tabs-user" class="trm-tabs-item">
                <!-- card header -->
<div class="trm-mc-header">
    <div class="trm-avatar-frame trm-mb-20">
        <img alt="Avatar" class="trm-avatar trm-light-icon" src="/myblog/img/profilephoto2.jpg"> <img alt="Avatar" class="trm-avatar trm-dark-icon" src="/myblog/img/profilephoto1.jpg">
    </div>
    <h5 class="trm-name trm-mb-15">
        洪汉桐
    </h5>
    
        <div class="trm-label">
            I`m
            <span class="trm-typed-text">
                <!-- Words for theme.user.typedText -->
            </span>
        </div>
    
</div>
<!-- card header end -->
                <!-- sidebar social -->

<div class="trm-divider trm-mb-40 trm-mt-40"></div>
<div class="trm-social">
    
        <a href="https://github.com" title="Github" rel="nofollow" target="_blank">
            <i class="iconfont fab fa-github"></i>
        </a>
    
</div>

<!-- sidebar social end -->
                <!-- info -->
<div class="trm-divider trm-mb-40 trm-mt-40"></div>
<ul class="trm-table trm-mb-20">
    
        <li>
            <div class="trm-label">
                地址:
            </div>
            <div class="trm-label trm-label-light">
                河北雄安
            </div>
        </li>
    
        <li>
            <div class="trm-label">
                年龄:
            </div>
            <div class="trm-label trm-label-light">
                19
            </div>
        </li>
    
</ul>
<!-- info end -->

                
    <div class="trm-divider trm-mb-40 trm-mt-40"></div>
    <!-- action button -->
    <div class="text-center">
        <a href="mailto:2067046599@qq.com" class="trm-btn">
            联系我
            <i class="iconfont far fa-envelope"></i>
        </a>
    </div>
    <!-- action button end -->

            </div>
            <div name="tabs-toc" class="trm-tabs-item active">
                <div class="post-toc">
    <ol class="toc"><li class="toc-item toc-level-1"><a rel="nofollow" class="toc-link" href="#介绍"  data-scroll-to="#介绍"><span class="toc-number">1.</span> <span class="toc-text">介绍</span></a></li><li class="toc-item toc-level-1"><a rel="nofollow" class="toc-link" href="#功能-登录-注销"  data-scroll-to="#功能-登录-注销"><span class="toc-number">2.</span> <span class="toc-text">功能- 登录 &#x2F; 注销</span></a></li><li class="toc-item toc-level-1"><a rel="nofollow" class="toc-link" href="#目录结构"  data-scroll-to="#目录结构"><span class="toc-number">3.</span> <span class="toc-text">目录结构</span></a></li><li class="toc-item toc-level-1"><a rel="nofollow" class="toc-link" href="#1-node环境"  data-scroll-to="#1-node环境"><span class="toc-number">4.</span> <span class="toc-text">1.node环境</span></a></li><li class="toc-item toc-level-1"><a rel="nofollow" class="toc-link" href="#2-下载vue-admin-template"  data-scroll-to="#2-下载vue-admin-template"><span class="toc-number">5.</span> <span class="toc-text">2.下载vue-admin-template</span></a></li><li class="toc-item toc-level-1"><a rel="nofollow" class="toc-link" href="#3-项目初始化"  data-scroll-to="#3-项目初始化"><span class="toc-number">6.</span> <span class="toc-text">3.项目初始化</span></a></li><li class="toc-item toc-level-1"><a rel="nofollow" class="toc-link" href="#4-运行测试"  data-scroll-to="#4-运行测试"><span class="toc-number">7.</span> <span class="toc-text">4.运行测试</span></a></li><li class="toc-item toc-level-1"><a rel="nofollow" class="toc-link" href="#5-配置修改"  data-scroll-to="#5-配置修改"><span class="toc-number">8.</span> <span class="toc-text">5.配置修改</span></a></li><li class="toc-item toc-level-1"><a rel="nofollow" class="toc-link" href="#6-重启测试"  data-scroll-to="#6-重启测试"><span class="toc-number">9.</span> <span class="toc-text">6.重启测试</span></a></li><li class="toc-item toc-level-1"><a rel="nofollow" class="toc-link" href="#说明一下登陆页面的修改"  data-scroll-to="#说明一下登陆页面的修改"><span class="toc-number">10.</span> <span class="toc-text">说明一下登陆页面的修改</span></a></li></ol>
</div>
            </div>
        </div>
    
    </div>
</div>
                    <!-- main card end -->
                </div>
            
            <div id="page-content" class="col-lg-8">
                <div class="trm-content" id="trm-content">
                    <div data-scroll data-scroll-repeat data-scroll-offset="500" id="about-triger"></div>

                    <div id="post-info" class="row hidden-sm">
    <div class="col-sm-4">
        <div class="trm-card trm-label trm-label-light text-center">
            <i class="iconfont far fa-calendar-alt trm-icon"></i><br>
            07/28
        </div>
    </div>
    <div class="col-sm-4">
        <div class="trm-card trm-label trm-label-light text-center">
            <i class="iconfont far fa-clock trm-icon"></i><br>
            07:34
        </div>
    </div>
    <div class="col-sm-4">
        <div id="post-author" class="trm-card trm-label trm-label-light text-center">
            <i class="iconfont far fa-user trm-icon"></i><br>
            洪汉桐
        </div>
    </div>
</div>
<div class="trm-card ">
    <article id="article-container" class="trm-publication">
    <h1 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h1><p>[vue-element-admin]<a target="_blank" rel="noopener" href="https://panjiachen.github.io/vue-element-admin/#/login?redirect=%2Fdashboard">link</a> 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。</p>
<h1 id="功能-登录-注销"><a href="#功能-登录-注销" class="headerlink" title="功能- 登录 &#x2F; 注销"></a>功能- 登录 &#x2F; 注销</h1><pre><code>- 权限验证
  - 页面权限
  - 指令权限
  - 权限配置
  - 二步登录

- 多环境发布
  - dev sit stage prod

- 全局功能
  - 国际化多语言
  - 多种动态换肤
  - 动态侧边栏（支持多级路由嵌套）
  - 动态面包屑
  - 快捷导航(标签页)
  - Svg Sprite 图标
  - 本地/后端 mock 数据
  - Screenfull全屏
  - 自适应收缩侧边栏

- 编辑器
  - 富文本
  - Markdown
  - JSON 等多格式

- Excel
  - 导出excel
  - 导入excel
  - 前端可视化excel
  - 导出zip

- 表格
  - 动态表格
  - 拖拽表格
  - 内联编辑

- 错误页面
  - 401
  - 404

- 組件
  - 头像上传
  - 返回顶部
  - 拖拽Dialog
  - 拖拽Select
  - 拖拽看板
  - 列表拖拽
  - SplitPane
  - Dropzone
  - Sticky
  - CountTo

- 综合实例
- 错误日志
- Dashboard
- 引导页
- ECharts 图表
- Clipboard(剪贴复制)
- Markdown2html
</code></pre>
<h1 id="目录结构"><a href="#目录结构" class="headerlink" title="目录结构"></a>目录结构</h1><pre><code>├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板 单页面应用
├── src                        # 源代码
│   ├── api                    # 所有请求（给后端）
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout 
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试（配置）
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json
</code></pre>
<h1 id="1-node环境"><a href="#1-node环境" class="headerlink" title="1.node环境"></a>1.node环境</h1><p>个人推荐node使用 v16.x.x的版本<br>npm 的版本 9.x.x</p>
<p>注意，node可以更低一些，但是不要更高</p>
<h1 id="2-下载vue-admin-template"><a href="#2-下载vue-admin-template" class="headerlink" title="2.下载vue-admin-template"></a>2.下载vue-admin-template</h1><p>浏览一下其他高高手的文档 <a target="_blank" rel="noopener" href="https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/">https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/</a><br>根据自己的需求来选择基础模板或是其他模板（需要梯子打开）</p>
<h1 id="3-项目初始化"><a href="#3-项目初始化" class="headerlink" title="3.项目初始化"></a>3.项目初始化</h1><pre><code>1.解压至非中文无空格目录下
2.vscode打开项目
3.安装依赖
    npm config set registry http://registry.npm.taobao.org/
    npm install
</code></pre>
<h1 id="4-运行测试"><a href="#4-运行测试" class="headerlink" title="4.运行测试"></a>4.运行测试</h1><pre><code>npm run dev
    
</code></pre>
<h1 id="5-配置修改"><a href="#5-配置修改" class="headerlink" title="5.配置修改"></a>5.配置修改</h1><p><strong>vue.config.js</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">const port = 8888      // 修改端口  </span><br><span class="line">    lintOnSave: false, // 语法校验的参数</span><br><span class="line">        open: false,   // 否自动打开浏览器</span><br></pre></td></tr></table></figure>

<p><strong>src\settings.js</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">title: &#x27;导航显示的名称&#x27;</span><br></pre></td></tr></table></figure>

<p><strong>src\router\index.js</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">meta: &#123; title: &#x27;&#x27;, icon &#x27;&#x27;&#125;  //系统标题</span><br></pre></td></tr></table></figure>

<h1 id="6-重启测试"><a href="#6-重启测试" class="headerlink" title="6.重启测试"></a>6.重启测试</h1><h1 id="说明一下登陆页面的修改"><a href="#说明一下登陆页面的修改" class="headerlink" title="说明一下登陆页面的修改"></a>说明一下登陆页面的修改</h1><p> src 》 view 》 login 》index.vue</p>
<p>修改标题，英文的提示框改成中文等，密码的校验</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">删掉</span><br><span class="line">&lt;div class=&quot;tips&quot;&gt;</span><br><span class="line">    &lt;span style=&quot;margin-right:20px;&quot;&gt;username: admin&lt;/span&gt;</span><br><span class="line">    &lt;span&gt; password: any&lt;/span&gt;</span><br><span class="line"> &lt;/div&gt;</span><br></pre></td></tr></table></figure>



</article>
    
    <div class="trm-reward">
        
            <span class="trm-reward-btn trm-glow" onclick='var qr = document.getElementById("qr"); qr.style.display = (qr.style.display === "none") ? "block" : "none";'>
                <i class="iconfont fas fa-hand-holding-usd"></i>
            </span>
        
        <p class="trm-reward-comment">I'm so cute. Please give me money.</p>
        <div id="qr" style="display:none;">
            
                <div style="display:inline-block">
                    <a rel="noopener noreferrer" href='\img\QRCode.jpg' target='_blank' >
                       <img src="/myblog/%5Cimg%5CQRCode.jpg" alt="微信" loading="lazy">
                    </a>
                    <p>微信</p>
                </div>
            
                <div style="display:inline-block">
                    <a rel="noopener noreferrer" href='\img\Alipay.jpg' target='_blank' >
                       <img src="/myblog/%5Cimg%5CAlipay.jpg" alt="支付宝" loading="lazy">
                    </a>
                    <p>支付宝</p>
                </div>
            
        </div>
    </div>

    

</div>
<div id="post-next-prev" class="row">
    <div class="col-lg-12">
        <!-- title -->
        <h5 class="trm-title-with-divider">
            其他文章
            <span data-number="02"></span>
        </h5>
    </div>
    
        <div class="col-lg-6">
    <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
        <a href="/myblog/2023/08/01/Java%E5%9F%BA%E7%A1%80/" class="trm-cover-frame trm-anima-link">
            
            
                <img alt="cover" class="no-fancybox" src="/myblog/img/block.jpg">
            
        </a>
        
        <div class="trm-card-descr">
            <div class="trm-label trm-category trm-mb-20">
                <a href=" /myblog/categories/Java%E9%9D%A2%E8%AF%95%E6%A0%B8%E5%BF%83/">
                    Java面试核心
                </a>
            </div>
            <h5>
                <a href="/myblog/2023/08/01/Java%E5%9F%BA%E7%A1%80/" class="trm-anima-link">
                    Java 基础
                </a>
            </h5>
            <div class="trm-divider trm-mb-20 trm-mt-20"></div>
            <ul class="trm-card-data trm-label">
                <li>23/08/01</li>
                <li>08:34</li>
                
                
            </ul>
        </div>
    </div>
</div>
    
    
        <div class="col-lg-6">
    <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
        <a href="/myblog/2023/07/24/%E5%AF%B9CHATGPT%E7%9A%84%E7%90%86%E8%A7%A3/" class="trm-cover-frame trm-anima-link">
            
            
                <img alt="cover" class="no-fancybox" src="/myblog/img/block.jpg">
            
        </a>
        
        <div class="trm-card-descr">
            <div class="trm-label trm-category trm-mb-20">
                <a href=" /myblog/categories/learn-and-imitate/">
                    learn and imitate
                </a>
            </div>
            <h5>
                <a href="/myblog/2023/07/24/%E5%AF%B9CHATGPT%E7%9A%84%E7%90%86%E8%A7%A3/" class="trm-anima-link">
                    对CHATGPT的理解
                </a>
            </h5>
            <div class="trm-divider trm-mb-20 trm-mt-20"></div>
            <ul class="trm-card-data trm-label">
                <li>23/07/24</li>
                <li>07:49</li>
                
                
            </ul>
        </div>
    </div>
</div>
    
</div>

    



                    <div class="trm-divider footer-divider"></div>

                    <!-- footer -->
                    <footer class="trm-scroll-animation" data-scroll data-scroll-offset="50">

    
        <div class="trm-footer-item">
            <a rel="noopener" href="https://beian.miit.gov.cn/" target="_blank"></a>
        </div>
    

    

    
        <div class="trm-footer-item">
            <span>
                由 <a href="https://hexo.io" target="_blank" rel="noopener">Hexo</a> 驱动 v6.3.0
            </span>
            <span class="footer-separator" data-separator=" | "></span>
            <span> 
                主题 - 
                <a rel="noopener" href='https://github.com/MaLuns/hexo-theme-async' target='_blank'>Async</a>
                v2.0.9
            </span>
        </div>
      

    
        <div class="trm-footer-item">
            博客已萌萌哒运行 <span id="since" class="trm-accent-color"></span> 天
        </div>
     

    
        <div class="trm-footer-item">
            Hosted by <a href="https://github.com" rel="noopener" target="_blank">Github Pages</a>
        </div>
     
</footer>

<script>
    function show_date_time () {
        var BirthDay = new Date("07/15/2023 17:57:32");
        var today = new Date();
        var timeold = (today.getTime() - BirthDay.getTime());
        var msPerDay = 24 * 60 * 60 * 1000
        var day = Math.floor(timeold / msPerDay)
        since.innerHTML = day
    }
    show_date_time()
</script>
 
                    <!-- footer end -->

                </div>
            </div>
        </div>
    </div>
</div>
            <!-- body end -->

            <div class="trm-fixed-container" data-scroll data-scroll-sticky data-scroll-target=".locomotive-scroll__sticky-target" data-scroll-offset="-10">
    
        <div class="trm-fixed-btn" data-title="阅读模式" onclick="asyncFun.switchReadMode()">
            <i class="iconfont fas fa-book-reader"></i>
        </div>
    
    
    <div id="trm-back-top" class="trm-fixed-btn" data-title="回到顶部">
        <i class="iconfont fas fa-arrow-up"></i>
    </div>
</div>
          </div>
        </div>
      </div>
      <!-- scroll container end -->

  </div>
  <!-- app wrapper end -->

  
  <!-- Plugin -->




    
    
<script src="https://unpkg.com/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script>

    
<script src="https://unpkg.com/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

    

    
        <script src="/myblog/js/plugins/typing.js?v=2.0.9"></script>
    

    

    <!-- 数学公式 -->
    

    <!-- 评论插件 -->
    
        

        
    



<!-- CDN -->


    

    

    




    <!-- Service Worker -->
    
    <!-- baidu push -->
    


<script id="async-script" src="/myblog/js/main.js?v=2.0.9"></script>

</body>

</html>